<template>
  <view class="container">
    <!-- 新闻列表 -->
    <view class="news-list">
      <view 
        v-for="(item, index) in newsList" 
        :key="index" 
        class="news-item"
        @tap="goToDetail(item.id)"
      >
        <!-- 左侧图片 -->
        <image :src="item.image" class="news-image" mode="aspectFill"></image>

        <!-- 右侧文字内容 -->
        <view class="news-content">
          <text class="news-title">{{ item.title }}</text>
          <text class="news-summary">{{ item.summary }}</text>
          <text class="news-date">{{ item.date }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newsList: [
        {
          id: 1,
          title: '第14届北京法治宣传周将于4月22-25日举行',
          summary: '本届宣传周以“弘扬法治精神，共建和谐社会”为主题，将开展线上线下普法活动。',
          image: '/static/banner/1.webp',
          date: '2025-04-18'
        },
        {
          id: 2,
          title: '最高法发布新一批指导性案例',
          summary: '涉及合同纠纷、知识产权保护等多个领域，为全国法院提供裁判参考。',
          image: '/static/banner/2.jpg',
          date: '2025-04-15'
        },
        {
          id: 3,
          title: '民法典实施三周年，司法实践成效显著',
          summary: '三年来全国法院适用民法典审理案件超千万件，推动法律落地生根。',
          image: '/static/banner/3.webp',
          date: '2025-04-10'
        },
        {
          id: 4,
          title: '未成年人保护法修订案正式施行',
          summary: '新增网络保护专章，强化学校、家庭、社会三方责任，保障青少年权益。',
          image: '/static/banner/1.webp',
          date: '2025-04-05'
        },
        {
          id: 5,
          title: '未成年人保护法修订案正式施行',
          summary: '新增网络保护专章，强化学校、家庭、社会三方责任，保障青少年权益。',
          image: '/static/banner/1.webp',
          date: '2025-04-05'
        },
        {
          id: 6,
          title: '未成年人保护法修订案正式施行',
          summary: '新增网络保护专章，强化学校、家庭、社会三方责任，保障青少年权益。',
          image: '/static/banner/1.webp',
          date: '2025-04-05'
        }
      ]
    };
  },
  methods: {
    goToDetail(id) {
		uni.showToast({
			title: '请输入用户名和密码',
			icon: 'none'
		});
		uni.navigateTo({
			url: `/pages/article-detail/article-detail?id=${id}`
		});
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.news-item {
  display: flex;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.news-item:active {
  transform: scale(0.98);
}

.news-image {
  width: 200rpx;
  height: 150rpx;
  border-top-left-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
}

.news-content {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  line-height: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.news-summary {
  font-size: 26rpx;
  color: #666;
  line-height: 36rpx;
  margin-top: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.news-date {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}
</style>